<template>
    <a-form id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit"
    >
        <a-form-item>
            <h1 style="text-align: center; margin: 64px 0 0">请登陆</h1>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="用户名">
            <a-input
                    v-decorator="[
                      'username',
                      { rules: [{ required: true, message: '请输入用户名' },
                                {min: 5, message: '用户名至少5位'},
                                {max: 20, message: '用户名不能超过20位'}] }
                    ]"
                    placeholder="用户名"
            >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                <a-icon slot="suffix" type="close-circle" v-if="form.getFieldValue('username')" @click="clearUsername"/>
            </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="密码">
            <a-input
                    v-decorator="[
                      'password',
                      { rules: [{ required: true, message: '请输入密码'},
                                {min: 5, message: '密码至少5位'},
                                {max: 20, message: '密码不能超过20位'}] }
                    ]"
                    type="password"
                    placeholder="密码"
            >
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                <a-icon slot="suffix" type="close-circle" v-if="form.getFieldValue('password')" @click="clearPassword"/>
            </a-input>
        </a-form-item>
        <a-form-item v-bind="formTailLayout">
<!--            <a-checkbox v-decorator="[
                              'remember',
                              {
                                valuePropName: 'checked',
                                initialValue: true,
                              }
                            ]"
            >
                Remember me
            </a-checkbox>
            <a class="login-form-forgot" href="">Forgot password</a>-->
            <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    import { LOGIN } from '../store/mutation-types'
    import { mapMutations } from 'vuex'
    import AFormItem from "ant-design-vue/es/form/FormItem";
    export default {
        components: {AFormItem},
        data: () => ({
            formItemLayout: {
                labelCol: {span: 8},
                wrapperCol: {span: 8},
            },
            formTailLayout: {
                labelCol: {span: 8},
                wrapperCol: {span: 8, offset: 8},
            }
        }),
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        methods: {
            ...mapMutations([
                LOGIN
            ]),
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (err) {
                        return
                    }
                    this.$axios.post('login',values)
                        .then(res => {
                            if (res.data.code === 0) {
                                this[LOGIN]({
                                    name: res.data.name,
                                    role: res.data.role
                                })
                                this.$router.push({name: 'home'})
                            }
                            else {
                                this.$message.error(res.data.message);
                            }
                        })
                        .catch(error => {
                            console.log(error)
                            this.$message.error('请求错误');
                        })
                        .finally(() => {
                            // this.$loading().close()
                            // this.$message.error('finally');
                        })
                    console.log('Received values of form: ', values);
                });
            },
            clearUsername() {
                // this.form.setFieldsValue({username: ''})
                this.form.resetFields(['username'])
            },
            clearPassword() {
                this.form.setFieldsValue({password: ''})
            }
        },
    };
</script>

<style scoped>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
</style>
